<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"> meta为搜索引擎定义关键词: 定义网页作者:为网页定义描述内容:
    <meta name="keywords" content="HTML, CSS, XML, JavaScript"> 每10秒中刷新当前页面:
    <meta http-equiv="refresh" content="10">
    <title>code的一把手练习</title>
</head>

<body>
    <h1>我的第一个标题</h1>
    <h2>第二个标题</h2>
    <h3>第三个标题</h3><br>
    <hr>
    <a href="https://www.baidu.com">百度一下</a><br><br>
    <a href="http://www.w3cschool.cn">超链接到w3school网站</a>
    <p>我的第一个段落。</p>

    <!-- <a>这是一个图片</a> -->
    <img src="D:\云润大数据的学习资源\html-css-JavaScript\img\1.jpg" width="400" height="253">
    <hr>
    <br>

    <b>加粗文本字</b>
    <i>斜体文本字体</i>
    <code>电脑自动输出怎么说</code>
    <br>
    <br> 这是上标
    <sub>上标标签</sub>
    <br> 这是下标
    <sup>这是下标标签</sup>
    <hr> HTML 空链接：指指向链接后，鼠标变成手形，但单击后仍停留在当前页面。 临时加的空链接，主要为了能更好的看到最终的效果
    <a href="#">空连接</a>
    <br> HTML 链接 - target 属性
    <br> 如果将 target 属性设置为 "_blank" 则文档就会在新窗口打开。
    <a href="https://www.w3cschool.cn/html/html-links.html" target="_blank">如果将 target 属性设置为 "_blank" 则文档就会在新窗口打开。</a>

    <br>
    <p>
        <a href="#tips">这下面就是想看你需要点击当前页面跳转到你想要的位置的（查看第4章节）</a>
    </p>
    <br>
    <h2>章节 1</h2>
    <p>这边显示该章节的内容……</p>

    <h2>章节 2</h2>
    <p>这边显示该章节的内容……</p>

    <h2>章节 3</h2>
    <p>这边显示该章节的内容……</p>


    <h2>
        章节 5</h2>
    <p>这边显示该章节的内容……</p>

    <h2>章节 6</h2>
    <p>这边显示该章节的内容……</p>

    <h2>章节 7</h2>
    <p>这边显示该章节的内容……</p>

    <h2>章节 8</h2>
    <p>这边显示该章节的内容……</p>

    <br>
    <h2> <a id="tips">第4章节</a></h2>
    <p>这边显示该章节的内容……</p>

    <br>
    <br>
    <br>
    <hr>
    <p>

        head元素包含了所有的头部标签元素。在元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种 meta 信息。 可以添加在头部区域的元素标签为:meta,link,script, noscript和 base等。

    </p>



    <hr><br> HTML CSS百科及常用嵌入方式 目前的模式是html+css+javascript，如何理解呢，就是html是网页的结构，CSS是网页的样式，javascript是行为。 结构就是盖房子先要把结构建出来，然后用CSS来装饰。
    <br> HTML样式实例 - 背景颜色 背景色属性（background-color）定义一个元素的背景颜色： style合理利用这个标签



    <h1 style="background-color:red;">背景颜色为红色</h1>
    我们可以使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式:
    <h2 style="font-family:arial;color:aqua;font-size:20px">字体为arial、颜色为绿色、大小为20</h2>
    <br>
    <br> 使用 text-align（文字对齐）属性指定文本的水平与垂直对齐方式：
    <h2 style="font-family:Franklin Gothic Medium;color:blue;font-size:60px;text-align:center">使用 text-align（文字对齐居中）</h2>
    <hr> 在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。
    <br> 为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。
    <img src="D:\云润大数据的学习资源\html-css-JavaScript\img\1.jpg" alt="程序员" height="500" width="300">
    <br>
    <br>
    <br> 这里要注意那个hr标签就是有点与那个格式style的标签有点不一样需要注意。
    <hr>属性： size: 设置水平分隔线的高度，单位：像素 默认值是2
    <br> width: 设置水平分隔线的宽度， 单位：像素 % 默认值是100%
    <br>align:设置水平分隔线的对齐方式。 默认值是center 还有left right
    <br> color: 设置水平分隔线的颜色。 默认值是black
    <br> noshade: 取消水平线的3d阴影

    <hr size=8 color=red width=2000>
    <br>如果想要垂直的线，可以这样来进行设置： 例：
    <hr size=50 color=red width=5 align=center>
    <br>
    <hr size=8 color=red width=2000> HTML 表格的基本结构：
    <br>table定义表格

    <br> th定义表格的标题栏（文字加粗）

    <br>tr定义表格的行

    <br>td定义表格的列

    <table border="2">
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
        <tr>
            <td>第一列</td>
            <td>第二列</td>
        </tr>
        <tr>
            <td>第一列</td>
            <td>第二列</td>
        </tr>

    </table>
    <hr size=5 color=green>
    <br> 无序列表使用 ul标签：<br> 有序列表始于 ol标签。<br>每个列表项始于 li 标签
    <h1>无序列表</h1>
    <ul style="list-style-type:circle">
        <li>无序列表</li>
        <li>无序列表</li>
    </ul>
    <ul style="list-style-type:decimal">
        <li>无序列表</li>
        <li>无序列表</li>
    </ul>

    <br>
    <h1 style="color:aqua">有序列表</h1>
    <ol type="a">
        <li>有序列表</li>
        <li>有序列表</li>

    </ol>

    关于表单的HTML标签的介绍 – Text文本 – Textarea文本域 – Radio单选择 – Checkbox多选择 – Select选择 – File文件 – Hidden – Submit提交 – Reset重置 – Button按钮….
    <table border="1" align="center" width="80%">
        <tr>
            <td>小姐姐</td>
            <td>小哥哥</td>
        </tr>
        <tr>
            <td align="center"><b>大哥</b></td>
            <td align="center"><b>大姐</b></td>
        </tr>

    </table>































</body>

</html>